<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
      v-if="configId != 1"
    ></aps-form>
    <div v-if="configId == 2 && configId != 1" class="title">
      <el-tag>特殊参数说明：</el-tag>
      <el-tag>特殊参数为数组</el-tag>
      <el-tag
        >第一位为导航跳转类型（type； 1驾驶舱内部跳转
        2跳转web端（现已关闭））</el-tag
      >
      <el-tag
        >第二位为显示的地图等级 1 全国地图 2 浙江省地图 3
        舟山地图（注：中心的地图还有是否显示地图决定）</el-tag
      >
    </div>
    <el-table
      border
      height="700"
      :data="tableData"
      row-key="id"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      v-if="configId != 1"
    >
      <el-table-column
        prop="name"
        label="菜单模块名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="subheading"
        label="副标题名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="type"
        label="路由级别"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.nav_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-view"
            @click="showModel(scope.row, true, 'detail')"
          >
            详情
          </el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="showModel(scope.row, false, 'edit')"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-plus"
            @click="showModel(scope.row, false, 'addchildren')"
          >
            新增
          </el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="handlerDelete(scope.row)"
            style="color: #f56c6c"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <component
      :is="modelName"
      :id="id"
      :configId="configId"
      :operateType="operateType"
      :visible.sync="show"
      :disabledFalge="disabledFalge"
      @close="close"
    ></component>
  </lb-layout>
</template>

<script>
import { getNavdetailList, deleteItem } from "@/api/navset/index.js";
import operate from "@/views/configuration/navset/components/childrenAdd.vue";
export default {
  name: "",
  components: {
    operate,
  },
  dicts: ["nav_type"],
  data() {
    return {
      configId: null,
      //弹窗
      id: "",
      modelName: "",
      operateType: "", // addfather 新增父级  edit 修改  detail 详情  addchildren 新增子级
      show: false,
      disabledFalge: false,
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {},
          formSoltButton: [
            {
              label: "新增",
              type: "primary",
              typeName: "el-button",
              plain: true,
              size: "small",
              icon: "el-icon-plus",
              click: () => this.showModel({}, false, "addfather"),
            },
          ],
        },
      },
      isExpandAll: true,
      tableData: [],
    };
  },
  created() {
    // console.log(this.$route);
    this.configId = this.$route.query.configId;
  },
  mounted() {
    this.handlerSearchDetail();
  },
  methods: {
    async initData(data) {
      let that = this;
      let id = this.configId;
      that.$store.commit("app/updateApiCount", "add");
      await getNavdetailList(id)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.tableData = res?.data?.dynamicMenuConfigItemVos ?? [];
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 搜索
    handlerSearchDetail() {
      const { ...other } = this.$refs?.form?.getFieldsValue();
      const data = {
        ...other,
      };
      this.initData(data);
    },
    // 重置
    handleReset() {
      // this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
    handlerDelete(row) {
      let that = this;
      let id = row.id;
      const text = "是否确认删除" + (row?.siteName ?? "该条数据") + "？";
      this.$modal
        .confirm(text)
        .then(() => {
          that.delectRequest(id);
        })
        .catch(() => {
          that.$message({
            message: "取消删除",
          });
        });
    },
    delectRequest(id) {
      let that = this;
      deleteItem(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          that.$message.success("已删除!");
          that.handlerSearchDetail();
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    // 弹窗
    showModel(params, falge, operateType) {
      this.modelName = "operate";
      this.id = params?.id || "";
      this.disabledFalge = falge;
      this.operateType = operateType;
      setTimeout(() => {
        this.show = true;
      }, 200);
    },
    close(status) {
      this.show = false;
      setTimeout(() => {
        if (status) this.handlerSearchDetail();
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .title {
  .el-tag {
    margin-right: 10px !important;
    margin-bottom: 20px;
  }
}
</style>
